import { Button, LinearProgress } from "@mui/material";
import React from "react";
import icon from "@/assets/images/home/subject.png";
import "./subjectListItem.less";

// 作用于约束props的类型 ，只在当前这个组件中使用，不用写到的.d.ts里面
interface IProps {
  buttonText: string;
  data: IExamItem;
  isFast?: boolean;
}

// 作为一个组件
//   首页和快速刷题又单独的列表，该组件是列表里面的一项
export default function SubjectListItem(props: IProps) {
  return (
    <div className="sub-list-item flex">
      <div className="icon">
        <img src={icon} alt="" />
      </div>
      <div className="m">
        <h4>{props.data.title}</h4>
        <p style={{ display: props.isFast ? "none" : "block" }}>
          {/* 把/前面的数字做随机,把下面的进度条 */}
          {props.data.itemCount}/{props.data.itemCount}题
        </p>
        <LinearProgress
          style={{ display: props.isFast ? "none" : "block" }}
          variant="determinate"
          value={100}
        />
      </div>
      <div className="but">
        <Button variant="contained">{props.buttonText}</Button>
      </div>
    </div>
  );
}
